<template>
  <div class="app-container">
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column label="充值金额" align="center">
        <template slot-scope="scope">
          {{ scope.row.money }}
        </template>
      </el-table-column>
      <el-table-column label="充值时间" align="center">
        <template slot-scope="scope">
          {{ scope.row.createTime }}
        </template>
      </el-table-column>
      <el-table-column align="center" prop="created_at" label="操作">
        <template slot-scope="scope">
          <el-row>
            <el-button  type="text" style="color:red" @click="deleteUser(scope.row.id)">删除</el-button>
          </el-row>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="params.pageNum" :limit.sync="params.pageSize" @pagination="fetchData" />
  </div>
</template>

<script>
import { rechargeList,deleteRecharge} from '@/api/user'
import Pagination from '@/components/Pagination'
import waves from '@/directive/waves'
import Calendar from '@/components/Cascader'
export default {
  components: { Pagination, Calendar },
  directives: { waves },
  data() {
    return {
      list: [],
      listLoading: true,
      total: 10,
      params: {
        customerId:this.$route.query.id,
        pageNum: 1,
        pageSize: 10,
      },
    }
  },
  created() {
      console.log(this.$route)
      console.log('进入到充值列表')
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.listLoading = true
      rechargeList(this.params).then(response => {
        this.total = response.total
        this.list = response.rows
        this.listLoading = false
      })
    },
    deleteUser(id) {
      this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteRecharge({id:id}).then(res => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.fetchData()
        })
      })
    },
    resetForm() {
      this.params = {
        pageNum: 1,
        pageSize: 10
      }
      this.$nextTick(() => {
        this.fetchData()
      })
    }
  }
}
</script>
<style lang="scss" scoped>
    /deep/.el-dialog{
            width:40%
    }
</style>
